<%@ page import="com.lczyfz.istep.common.constants.LearnProgress" %>
<%--
  Created by IntelliJ IDEA.
  User: CQH
  Date: 2017/3/14
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<c:set var="unStart"  value="<%=LearnProgress.unStart%>"/>
<c:set var="oneQuarter"  value="<%=LearnProgress.oneQuarter%>"/>
<c:set var="half"  value="<%=LearnProgress.half%>"/>
<c:set var="threeQuarter"  value="<%=LearnProgress.threeQuarter%>"/>
<c:set var="finish"  value="<%=LearnProgress.finish%>"/>
<html>
<head>
    <title>课程学习</title>

    <link href="${path}/css/video-js.css" rel="stylesheet">
    <script type="text/javascript" src="${path}/js/common/drag.js"></script>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('click', '.vjs-fullscreen-control', function () {
                if ($("#example_video_1").hasClass("vjs-fullscreen")) {
                    $("#example_video_1").removeClass("vjs-fullscreen");
                } else {
                    $("#example_video_1").addClass("vjs-fullscreen");
                }
            });
            $(document).on('click', '.vjs-big-play-button', function () {
                if (${empty filePath}) {
                    3333333
                    alertx("该课件没有视频！");
                }
            });
            var myPDF = new PDFObject({url: "http://demo.lanrenzhijia.com/2014/pdf1023/sample.pdf"}).embed("pdf");
        });
        function page(n, s) {
            $("#pageNo").val(n);
            $("#pageSize").val(s);
            $("#searchForm").submit();
            return false;
        }
        //进入实验
        function experimentOperate(courseId, coursewareId) {
            var toUrl;
//          var s = window.parent.document.getElementById("maskDIV");
//          s.style.display = "block";
            $.ajax({
                type: "POST",
                url: "${ctx}/scene/sceneEnvironment/isExperimentExist",
                data: {
                    coursewareId: coursewareId
                },
                success: function (jsonModel) {

                    var msg = jsonModel.msg;
                    var instanceId = jsonModel.dataObj;

                    if (msg == '2') {
                        $.mbox({
                            area: ["450px", "auto"], //弹框大小
                            border: [0, .5, "#666"],
                            dialog: {
                                msg: "已经存在实验，是否跳转至该课程完成实验?",
                                btns: 2,   //1: 只有一个按钮   2：两个按钮  3：没有按钮 提示框
                                type: 2,   //1:对钩   2：问号  3：叹号
                                btn: ["原实验", "新实验"],  //自定义按钮
                                yes: function () {  //点击左侧按钮：成功
                                    msg = '4';
                                    <%--var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait","_blank");--%>

                                    toUrl = "${ctx}/scene/sceneEnvironment/toExperimentOperateView?instanceId=" + instanceId + "&msg=" + msg + "&coursewareId=" + coursewareId;
                                    var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait", "_blank");
//                                  var newWin = window.open(toUrl, "_blank");
                                    newWin.location.href = toUrl;

                                },
                                no: function () { //点击右侧按钮：失败
                                    msg = '5';
                                    <%--var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait","_blank");--%>

                                    toUrl = "${ctx}/scene/sceneEnvironment/toExperimentOperateView?instanceId=" + instanceId + "&msg=" + msg + "&coursewareId=" + coursewareId;
                                    var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait", "_blank");
//                                  var newWin = window.open(toUrl, "_blank");
                                    newWin.location.href = toUrl;
                                }
                            }
                        });
                    }
                    else {

                        <%--var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait","_blank");--%>

                        toUrl = "${ctx}/scene/sceneEnvironment/toExperimentOperateView?instanceId=" + instanceId + "&msg=" + msg + "&coursewareId=" + coursewareId;
                        var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait", "_blank");
//                      var newWin = window.open(toUrl, "_blank");
                        newWin.location.href = toUrl;

                        <%--window.open("${ctx}/scene/sceneEnvironment/toExperimentOperateView?instanceId="+instanceId+"&msg="+msg+"&coursewareId="+coursewareId);--%>

                    }
                    <%--if(msg=='3'||msg=='1')--%>
                    <%--{--%>
                    <%--var instanceId=jsonModel.dataObj;--%>
                    <%--//关闭遮罩--%>
                    <%--//                      var s = window.parent.document.getElementById("maskDIV");--%>
                    <%--//                      s.style.display = "none";--%>
                    <%--&lt;%&ndash;window.location.href="${ctx}/scene/sceneEnvironment/toExperimentOperate?courseId="+courseId+"&coursewareId="+coursewareId+"&instanceId="+instanceId;&ndash;%&gt;--%>

                    <%--window.open("${ctx}/scene/sceneEnvironment/toExperimentOperate?instanceId="+instanceId,"_blank");--%>

                    <%--} else if(msg=='2'){--%>
                    <%--//关闭遮罩--%>
                    <%--//                      var s = window.parent.document.getElementById("maskDIV");--%>
                    <%--//                      s.style.display = "none";--%>
                    <%--$.mbox({--%>
                    <%--area: [ "450px", "auto" ], //弹框大小--%>
                    <%--border: [ 0, .5, "#666" ],--%>
                    <%--dialog: {--%>
                    <%--msg: "已经存在实验，是否跳转至该课程完成实验?",--%>
                    <%--btns: 2,   //1: 只有一个按钮   2：两个按钮  3：没有按钮 提示框--%>
                    <%--type: 2,   //1:对钩   2：问号  3：叹号--%>
                    <%--btn: [ "原实验", "新实验"],  //自定义按钮--%>
                    <%--yes: function() {  //点击左侧按钮：成功--%>
                    <%--var instanceId=jsonModel.dataObj;--%>
                    <%--window.open("${ctx}/scene/sceneEnvironment/toExperimentOperate?instanceId="+instanceId,"_blank");--%>

                    <%--},--%>
                    <%--no: function() { //点击右侧按钮：失败--%>
                    <%--//                                  var instanceId=jsonModel.dataObj;--%>
                    <%--//                                  var s = window.parent.document.getElementById("maskDIV");--%>
                    <%--//                                  s.style.display = "block";--%>
                    <%--$.ajax({--%>
                    <%--type: "POST",--%>
                    <%--url: "${ctx}/scene/sceneEnvironment/newExperimentOperate",--%>
                    <%--data: {--%>
                    <%--instanceId:instanceId,--%>
                    <%--coursewareId:coursewareId--%>
                    <%--},--%>
                    <%--success: function (instanceId) {--%>
                    <%--//关闭遮罩--%>
                    <%--//                                          var s = window.parent.document.getElementById("maskDIV");--%>
                    <%--//                                          s.style.display = "none";--%>
                    <%--window.open("${ctx}/scene/sceneEnvironment/toExperimentOperate?instanceId="+instanceId,"_blank");--%>
                    <%--},--%>
                    <%--error:function(){--%>
                    <%--//关闭遮罩--%>
                    <%--//                                          var s = window.parent.document.getElementById("maskDIV");--%>
                    <%--//                                          s.style.display = "none";--%>
                    <%--alert("下发新实验失败");--%>
                    <%--}--%>
                    <%--});--%>
                    <%--var instanceId=jsonModel.dataObj;--%>
                    <%--window.open("${ctx}/scene/sceneEnvironment/toExperimentOperate?instanceId="+instanceId,"_blank");--%>
                    <%--}--%>
                    <%--}--%>
                    <%--});--%>
                    <%--}--%>


                },
                error: function () {
//                  var s = window.parent.document.getElementById("maskDIV");
//                  s.style.display = "none";
//                  alert("生成实例失败");
                }
            });
            <%--var newWin = window.open("${ctx}/scene/sceneEnvironment/toSceneExperimentOperationWait","_blank");--%>
            <%--$.ajax().done(function() {--%>
            <%--// 重定向到目标页面--%>
            <%--newWin.location.href = toUrl;--%>
            <%--});--%>

        }

        //课件进度操作
        function LearnProgress(LearnProgress, CoursewareId) {
            $.ajax({
                type: "POST",
                url: "${ctx}/stu/stuLearn/LearnProgress",
                data: {
                    LearnProgress: LearnProgress,
                    CoursewareId: CoursewareId
                },
                success: function () {
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/resource/resourceCourse/getFinishClassHour?courseId=${param.courseId}",
                        data: {},
                        success: function (res) {
                            document.getElementById("getFinishClassHour").innerHTML = res;
                        },
                        error: function () {
                            console.info("error");
                        }
                    });
                },
                error: function () {
                    console.info("error");
                }
            })
        }

        //判断课件是否包含视频文件
        function checkHasVideoFile(CoursewareId, obj) {
            $.ajax({
                type: "POST",
                url: "${ctx}/resource/resourceCourseware/checkHasVideoFile?CoursewareId=" + CoursewareId,
                data: {},
                success: function (filePath) {
                    if (filePath == null || filePath == "") {
                        alertx("该课件没有视频！");
                        return false;
                    } else {
                        $("example_video_1").attr("preload", "auto")
                    }
                },
                error: function () {
                    console.info("error");
                }
            });

        }

        function aaa(){
            if(${empty filePath}){
                alertx("该课件没有视频！");
            }
        }

        //进入课程学习-点击查看文档-获取图片列表
        function viewDocument(CoursewareId){
            $.ajax({
                type: "POST",
                url: "${ctx}/resource/resourceCourseware/getImgList",
                data:{
                    CoursewareId:CoursewareId
                },
                success:function(res){
                    if(res.length == 0){
                        alertx("该课件没有文档！");
                    }else{
                        $("#imgBox").html(" ");
                        for (var i = 0; i < res.length; i++) {
                            $("#imgBox").append("<img src='" + '${path}'+res[i].url + "'>");
                        }
                    }


                },
                error:function(){
                    console.info("error");
                }
            });
        }

    </script>
    <script type="text/javascript" src="${path}/js/common/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/css/common/bootstrap.min.css" />

    <%--pdfBox--%>
    <script src="http://www.lanrenzhijia.com/ajaxjs/pdfobject.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- 播放器样式 -->
    <link rel="stylesheet" type="text/css" href="${path}/css/common/video-js.css"/>
    <!-- video.js must be in the <head> for older IEs to work. -->
    <script type="text/javascript" src="${path}/js/common/video.js"></script>
    <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>

    <style type="text/css">
        #myModal{
            margin: 50px 0 0 -450px;
        }
        .info1{
            padding-left: 120px;
            padding-top: 30px;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="${path}/css/common/mbox.css"/>  <!--背景样式 弹框样式-->
    <script type="text/javascript" src="${path}/js/common/jquery-1.10.2.min.js" ></script><!--jquery库-->
    <script type="text/javascript" src="${path}/js/common/jm-qi.js" ></script><!--自定义弹框大小，提示信息，样式，icon。。。。-->
    <script>
        function fff(){
            $.mbox({
                area: [ "450px", "auto" ], //弹框大小
                border: [ 0, .5, "#666" ],
                dialog: {
                    msg: "已经存在实验，是否跳转至该课程完成实验?",
                    btns: 2,   //1: 只有一个按钮   2：两个按钮  3：没有按钮 提示框
                    type: 2,   //1:对钩   2：问号  3：叹号
                    btn: [ "继续原实验", "下发新实验"],  //自定义按钮
                    yes: function() {  //点击左侧按钮：成功
                        alert("success");
                    },
                    no: function() { //点击右侧按钮：失败
                        alert("no");

                    }
                }
            });
        }

    </script>

</head>
<body>
<ul id="myTab" class="nav nav-tabs">
    <li >
        <a href="${ctx}/resource/resourceCourse/stuCourseList">课程列表</a>
    </li>
    <li class="active">
        <a href="${ctx}/resource/resourceCourse/enterCourseLearn?courseId=${param.courseId}&&classHour=${param.classHour}">课程学习</a>
    </li>
</ul>
<div id="myTabContent">

    <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         style="width: 900px;min-height:336px;min-width:300px;height: 400px;">
        <div class="modal-dialog" role="document" style="height: 100%;">
            <div class="modal-content" style="height: 100%;padding-top:36px;">
                <div class="modal-header" style="height:36px;max-height:36px;min-height:36px;margin-top:-36px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <!-- <h4 class="modal-title" id="demoModalLabel">这是标题</h4> -->
                    <h4 class="modal-title" id="imgTitle"></h4>
                </div>
                <div class="modal-body" style="height:100%;overflow:scroll;max-height:none;min-height:300px;">
                    <div class="demo" id="imgBox">
                        <%--<img src="${path}/imageBox/images/big-1.jpg">--%>
                        <%--<img src="${path}/imageBox/images/big-2.jpg">--%>
                        <%--<img src="${path}/imageBox/images/big-3.jpg">--%>
                        <%--<img src="${path}/imageBox/images/big-4.jpg">--%>
                        <%--<img src="${path}/imageBox/images/big-5.jpg">--%>
                        <%--<img src="${path}/imageBox/images/big-6.jpg">--%>
                        <%--<img src="${path}/imageBox/images/big-7.jpg">--%>
                    </div>
                </div>
                <!--<div class="modal-footer">
                </div>-->
                <div id="coor"
                     style="width: 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: #fff;"></div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade " id="cslist">
    </div>
    <div class="tab-pane fade in active col-lg-12" id="cslearn">
        <div class="row" style="border-bottom: 1px solid #7B7B7B;">

            <!--            <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2">
            </div>
            <div class="col-lg-8 col-md-8 col-xs-8 col-sm-8" style="margin-top:10px; margin-bottom: 30px;">
                <span style="font-size: x-large">${CoursewareName}</span>
                <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls
                       poster="" data-setup="{}" width="100%" height="550" onclick="aaa()">
                    <%--支持三种视频格式：MP4、WebM、Ogg--%>
                    <source src='${path}${filePath}' type='video/mp4'/>
                    <%--<source id="sourceTagName" src="${path}/videoPlay/resource/popin.mp4" type='video/mp4' />--%>
                    <%--<source src="J:/project/istep/src/main/webapp/videoPlay/resource/popin.mp4" type='video/mp4' />--%>
                    <%--<source src="${path}/videoPlay/popin.webm" type='video/webm' />--%>
                </video>
            </div>  -->

            <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6" style="margin-top:10px; margin-bottom: 30px;">
                <span style="font-size: x-large">${CoursewareName}</span>
                <div id="video" class="video-js vjs-default-skin vjs-big-play-centered">
                    <div id="a1"></div>
                </div>
            </div>

            <script type="text/javascript" src="${path}/ckplayer/ckplayer.js" charset="utf-8"></script>
            <script type="text/javascript">

                $('#video').bind('contextmenu', function () {
                    return false;
                });

                var flashvars = {
                    f: '${path}${filePath}',
                    c: 1,
                    s: 1,
                    b: 1
                    //p: 1       //自动播放视频
                };
                var params = {bgcolor: '#FFF', allowFullScreen: true, allowScriptAccess: 'always'};
                CKobject.embedSWF('ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '1024', '768', flashvars, params);
                /*
                 CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
                 下面三行是调用html5播放器用到的
                 */
                //课件-素材表中文件存放地址 local_url + 文件名称 + 文件格式，后缀
                //根据关联id，resource_id 匹配 视频文件
                <!--支持三种视频格式：MP4、WebM、Flv、F4v、m3u8-->
                var video = ['${path}${filePath}->video/mp4',
                    '${path}${filePath}->video/webm',
                    '${path}${filePath}->video/ogg',
                    '${path}${filePath}->video/flv',
                    '${path}${filePath}->video/f4v',
                    '${path}${filePath}->video/m3u8'];
                var support = ['iPad', 'iPhone', 'ios', 'android+false', 'msie10+false', 'webKit'];
                CKobject.embedHTML5('video', 'ckplayer_a1', 1024, 768, video, flashvars, support);
            </script>

            <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2" style="margin-top:400px;">
                <button id="myModalButton" type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal"
                        onclick="viewDocument('${CoursewareId}')" style="margin-top:150px;margin-left:250px;">查看文档
                </button>
                <%--<input  type="button" class="btn btn-info" value="询问对话框" onclick="fff()"/>--%>

                <!-- 点击触发模态框 -->
                <%--<button id="demo_button" type="button" class="btn btn-default" data-toggle="modal" data-target="#demoModal" style="width:80px;height:36px;">点击我</button>--%>
                <c:if test="${resourceCourseware!=null&&resourceCourseware.environmentId!=null&&resourceCourseware.environmentId!=''}">
                    <%--<a class="btn btn-info" style="margin-top:350px;" href="${ctx}/scene/sceneEnvironment/experimentOperate?courseId=${courseId}&coursewareId=${CoursewareId}" target="_blank">进入实验</a>--%>

                    <button type="button" class="btn btn-info" style="margin-top:150px;margin-left:250px;"
                            onclick="experimentOperate('${courseId}','${CoursewareId}')">进入实验
                    </button>
                </c:if>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 info1" >
                <p>课程信息：</p>
                <p class="infot">总时长：<span>${classHour}</span>课时</p>
                <p class="infot">已学习：<span id="getFinishClassHour">${finishClassHour}</span>课时</p>
                <p>课程文档：</p>
                <a class="btn btn-info infot"
                   href="${ctx}/resource/resourceCourseware/downloadDocFiles?courseId=${courseId}&&classHour=${classHour}">点击下载课程文档</a>
            </div>
            <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6" style="padding-left:300px;border-left:1px solid #7B7B7B;">
                <table class="table">
                    <thead>
                    <tr>
                        <th>课件名称</th>
                        <th>课件操作</th>
                    </tr>
                    </thead>
                    <tbody id="CoursewareTbody">
                    <c:forEach items="${CoursewareList}" var="CoursewareList">
                        <tr>
                            <td>
                                <a href="${ctx}/resource/resourceCourseware/findFileListByCoursewareId?CoursewareId=${CoursewareList.id}&&courseId=${courseId}&&classHour=${classHour}"
                                   onclick="checkHasVideoFile(${CoursewareList.id},this)">${CoursewareList.coursewareName}</a>
                            </td>
                            <td>
                                <div class="dropdown">
                                    <select class="input-medium"
                                            onchange="LearnProgress(this[selectedIndex].value, '${CoursewareList.id}')">
                                        <c:choose>
                                            <c:when test="${CoursewareList.learnProgress == unStart}">
                                                <c:set var="one" value="selected"/>
                                                <c:set var="two" value=""/>
                                                <c:set var="three" value=""/>
                                                <c:set var="four" value=""/>
                                                <c:set var="five" value=""/>
                                            </c:when>
                                            <c:when test="${CoursewareList.learnProgress == oneQuarter}">
                                                <c:set var="one" value=""/>
                                                <c:set var="two" value="selected"/>
                                                <c:set var="three" value=""/>
                                                <c:set var="four" value=""/>
                                                <c:set var="five" value=""/>
                                            </c:when>
                                            <c:when test="${CoursewareList.learnProgress == half}">
                                                <c:set var="one" value=""/>
                                                <c:set var="two" value=""/>
                                                <c:set var="three" value="selected"/>
                                                <c:set var="four" value=""/>
                                                <c:set var="five" value=""/>
                                            </c:when>
                                            <c:when test="${CoursewareList.learnProgress == threeQuarter}">
                                                <c:set var="one" value=""/>
                                                <c:set var="two" value=""/>
                                                <c:set var="three" value=""/>
                                                <c:set var="four" value="selected"/>
                                                <c:set var="five" value=""/>
                                            </c:when>
                                            <c:when test="${CoursewareList.learnProgress == finish}">
                                                <c:set var="one" value=""/>
                                                <c:set var="two" value=""/>
                                                <c:set var="three" value=""/>
                                                <c:set var="four" value=""/>
                                                <c:set var="five" value="selected"/>
                                            </c:when>
                                        </c:choose>
                                        <option value="${unStart}" ${one}>未开始</option>
                                        <option value="${oneQuarter}" ${two}>25%</option>
                                        <option value="${half}" ${three}>50%</option>
                                        <option value="${threeQuarter}" ${four}>75%</option>
                                        <option value="${finish}" ${five}>已学习</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>

</html>
